<template>
  <div class="wrapper_spend">
    <div class="wrapper_project">
      <div class="title ">人力支出统计</div>
      <div id="bar"></div>
      <div v-if="!dataLength" id="nodata">
        <img src="../../../img/img_01@3x.png" alt="" style="width:88px;height:58px;margin-top:50px">
        <div style="font-size:14px;margin-bottom:20px;padding-right:15px;margin-top:30px;color:#909399">暂无数据</div>
      </div>
    </div>
    <div class="wrapper_project" v-if="isPieShow">
      <div class="title ">人力支出统计</div>
      <div id="pie"></div>
      <div v-if="!pieDataLength" id="nodata">
        <img src="../../../img/img_01@3x.png" alt="" style="width:88px;height:58px;margin-top:50px">
        <div style="font-size:14px;margin-bottom:20px;padding-right:15px;margin-top:30px;color:#909399">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
    const pieColorList = ['#44D7B6', '#F7B500', '#32C5FF', '#987BFF', '#FF7518', '#6183FF', '#E02020']
    import { baseBarWidth } from '@/utils'
    const echarts = require('echarts')
    export default {
        data() {
            return {
                pieData:[],
                baseBarWidth,
                pieColorList
            }
        },
        props: {
            isPieShow: {
                type: Boolean,
                default: true
            },
            dataName:{
                type: Array,
                default:function () {
                    return []
                }
            },
            data :{
                type: Array,
                default:function () {
                    return []
                }
            },
            peopleSpendPie: {
                type: Array,
                default:function () {
                    return []
                }
            },
          peopleSpendDataPro :{
            type: Array,
            default:function () {
              return []
            }
          },
          peopleSpendDataNamePro :{
            type: Array,
            default:function () {
              return []
            }
          },
        },
        computed: {
          dataLength() {
            return this.data && this.data.length
          },
          pieDataLength() {
            return this.pieData && this.pieData.length
          }
        },
        mounted() {
            this.generateSpendBar()
            if (this.isPieShow) {
                this.generateSpendPie()
            }
        },
        watch:{
          dataName:{
            handler(newName, oldName) {
              this.generateSpendBar()
              // this.generateSpendPie()
            }
          },
          peopleSpendPie: {
            handler(newValue, oldValue) {
              this.generateSpendPie()
            }
          }
        },

        methods: {
            /**
             * 生成人力支出柱状图
             */

            generateSpendBar() {
              const option = {
                xAxis: {
                  type: 'category',
                  data: this.dataName,
                  axisLabel: {
                    interval:0,
                    rotate: -20,
                    formatter: function (name) {
                      return (name.length > 10 ? (name.slice(0,10)+"...") : name );
                    },
                  },
                },
                color: ['#409EFF'], // 配置图例颜色

                yAxis: {
                  type: 'value'
                },
                legend: {
                  data: ['按岗位统计'],
                  left: 30,
                  top: 15,
                  selectedMode: false
                },
                series: [{
                  data: this.data,
                  name: '按岗位统计',
                  type: 'bar',
                  barWidth: this.baseBarWidth,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true, // 开启显示
                        position: 'top', // 在上方显示
                        textStyle: { // 数值样式
                          color: 'black',
                          fontSize: 14
                        }
                      }
                    }
                  }
                }]
              }
              const myChart = echarts.init(document.getElementById('bar'))
              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option)
            },
            /**
             * 生成人力支出饼图
             */
            generateSpendPie() {
              const result = []
              this.peopleSpendPie.forEach((item,index)=>{
                result.push({
                  value: item.value, name: item.text
                })
              })
              this.pieData = result
              var option = {
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: this.pieColorList,
                legend: {
                  orient: 'vertical',
                  left: 30,
                  top: 15,
                  data: ['按项目统计'],
                  selectedMode: false
                },
                series: [
                  {
                    name: '按项目统计',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    barWidth: this.baseBarWidth,
                    data: this.pieData.length ? this.pieData : [] ,
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              }
              const myChart = echarts.init(document.getElementById('pie'))
              // 使用刚指定的配置项和数据显示图表。
              // console.log(option)
              myChart.setOption(option,true)
            }
        },
    }
</script>

<style lang="scss" scoped>
  .wrapper_spend{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    .wrapper_project{
      position: relative;
      flex: 1;
      max-width: 49%;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      justify-content: space-between;
      .title{
        // padding-left: 20px;
        margin-bottom: 20px;
      }
      #bar, #pie, #nodata{
        width: 100%;
        height: 300px;
        background: white;
        // flex: 1;
      }
      #nodata{
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 300px;
      }
    }
  }
  .defaultCircle{
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #7F7F7F;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }
</style>
